<template>
  <el-dialog v-model="dialogVisible" :title="title">
    <BaseForm @cancel='handleCancel' @submit='handleSubmit' :data='data' :fields='fields'>
      <template v-slot:roles='{item}'>
        <el-select v-model="item.roles" multiple  placeholder="Select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </BaseForm>
  </el-dialog>
</template>

<script lang='ts'>

import { computed, defineComponent, readonly } from '@vue/runtime-core'
import BaseForm from '@/components/form/base/index.vue'
import { classesCreate, classesEdit } from '@/api/classes'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'UserForm',
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
  },
  components: {
    BaseForm,
  },
  emits: ['update:visible', 'refresh'],
  setup (props, { emit }) {
    // const dialogVisible = ref(false)
    const options = readonly([
      { value: 'admin', label: '管理员' },
      { value: 'tourist', label: '游客' },
    ])

    const dialogVisible = computed({
      get () {
        return props.visible
      },
      set (value) {
        emit('update:visible', value)
      },
    })
    const fields = [
      {
        value: 'name',
        label: '分类名称',
      },
    ]
    async function handleSubmit (data) {
      try {
        if (data.id) {
          await classesEdit({ ...data })
        } else {
          await classesCreate({ ...data })
        }
        console.log('....')
        emit('update:visible', false)
        emit('refresh')
        ElMessage.success('操作成功')
      } catch (error) {
        console.error(error)
      }
    }
    function handleCancel () {
      emit('update:visible', false)
    }
    return {
      dialogVisible,
      fields,
      options,
      handleCancel,
      handleSubmit,
    }
  },
})
</script>

<style scoped lang="less">

</style>
